<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="Untitled-1.js"></script>
    <style type="text/css">
        h1 {
            color: red
        }
        
        p {
            color: blue
        }
    </style>
    <!--饮用外部样式表，使用link，并且使用啦相对路径-->
    <link rel="stylesheet" type="text/css" href="../css/index.css"></link>
    <style>
        ul.circle {
            list-style-type: circle
        }
        
        ul.square {
            list-style-type: square
        }
    </style>
    <style>
        .cities {
            background-color: black;
            color: white;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<!-- <script>
    function del() {
        alert("OK")
    }
</script> -->

<body bgcolor="green">

    <a href="#tips">有用的提示</a>
    <h1 style="font-family:arial;color:blue;font-size:20px; " align="center">helloword</h1>
    <h2>这是二级标题</h2>
    <!--使用外部样式表，通过class来饮用 class="定义的样式的名字"-->
    <div class="btncss">
        <h3>这是三级标题</h3>

    </div>

    <h4>这是四级标题</h4>
    <h5 style="text-align:center">这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p>我的第一个标题</p>
    <p>这是段落。</p>
    <p>这是段落。</p>
    <p>这是段落， 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。
    </p>

    <p>段落元素由 p 标签定义。</p>
    <p>this is sadklflaskdjflksd<br />sadlfjasldjf<br />lksadjfwoeiisfjsj<br />我是这样子的</p>
    <!--添加target=_blank,会重新打开一个新的窗口-->
    <a href="./index.html" style="text-decoration:none" target="_blank">viistW3cschool</a>
    <a href="./buju.html" style="text-decoration:none" target="_blank">去布局界面</a>
    <a href="../resource/abc.png">
        <img border="0" src="abc.jpg" />
    </a>
    <image src="../resource/abc.png" width="200" ,height="500"></image>
    <button style="color:blue;font:100" windth="300" height="500" on-drag-down="" onclick="clickButton()">点击我</button>
    <a name="tips">基本的注意事项 - 有用的提示</a></body><br />
<p>
    <a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<p>
    这是另一个 mailto 链接：
    <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>

<p>
    <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
<table border="1">
    <tr>
        <td>
            row1,cell1
        </td>
        <td<></td>
    </tr>
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>
            row1,cell1
        </td>
        <td>
            row1,cell2
        </td>
    </tr>
    <tr>
        <td>
            row1,cell1
        </td>
        <td>
            row1,cell2
        </td>
        <td>
            row1,cell1
        </td>
    </tr>
</table>

<body>

    <table width="400" border="1">
        <tr>
            <th cellpadding="10" align="left">消费项目....</th>
            <th align="right">一月</th>
            <th align="right">二月</th>
        </tr>
        <tr>
            <td rowspan="2" align="left">衣服</td>
            <td align="right">$241.10</td>
            <td align="right">$50.20</td>
        </tr>
        <tr>
            <td colspan="2" align="left">化妆品</td>
            <td align="right">$30.00</td>
            <td align="right">$44.45</td>
        </tr>
        <tr>
            <td align="left">食物</td>
            <td align="right">$730.40</td>
            <td align="right">$650.00</td>
        </tr>
        <tr>
            <th align="left">总计</th>
            <th align="right">$1001.50</th>
            <th align="right">$744.65</th>
        </tr>
    </table>
    <h4>一个无徐速度快</h4>
    <ul class="circle">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>
    <h4>Circle 项目符号列表：</h4>
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>
    <h4>Square 项目符号列表：</h4>
    <ul type="square">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>
    <h4>数字列表：</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>字母列表：</h4>
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>小写字母列表：</h4>
    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>罗马字母列表：</h4>
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <h4>小写罗马字母列表：</h4>
    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>一个嵌套列表：</h4>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>


    <h4>一个嵌套列表：</h4>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
    <div style="color:#00FF00">
        <h3>This is a header</h3>
        <p>This is a paragraph.</p>
    </div>

    <div class="cities">
        <h2>London</h2>
        <p>
            London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
        </p>
    </div>
</body>

</html>